<template>
  <!-- 5G设备选择器，弹出查询对话框选择设备的方式  -->
  <div class="topnav-content">
    <Input clearable search v-model="srhValue_" @on-search="search" @on-clear="clear" :disabled="disabled_" :placeholder="$t('select_device')" />
    <Modal v-model="selectModel"  :loading="modalLoading" :title="$t('select_device')" width="1024px" @on-ok="modelOk"  @on-cancel="modelCancel">
      <SearchHeader v-model="queryParam.where.keyword" :canAdd="false" @handleSearch="search"  @handleInit="queryParam.init">
        <Row :gutter="4">
          <Col span="6"><Input :placeholder="$t('code')" v-model="queryParam.where.code"></Input> </Col>
          <Col span="6"><Input :placeholder="$t('name')" v-model="queryParam.where.name"></Input> </Col>
          <Col span="6"><UserModelSelect :placeholder="$t('select_people')" ref="srhUserSelect" width="100%" v-model="queryParam.where.userId"></UserModelSelect> </Col>
          <Col span="6"><OrganizationTree v-model="queryParam.where.orgId" ref="organization" width="200px"/> </Col>
        </Row>
      </SearchHeader>
      <Card>
        <Table border :columns="columns" :data="tableData" @on-row-click="rowclick">
          <template slot-scope="{ row, index }" slot="select">
            <Button type="default" size="small" @click="rowclick(row,index)">{{$t('select')}}</Button>
          </template>
        </Table>
        <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
      </Card>

    </Modal>

  </div>
</template>
<script>
import OrganizationTree from '@/components/topnav/OrganizationTree';
import UserModelSelect from '@/components/topnav/UserModelSelect';
import SearchHeader from "@/view/Common/SearchHeader";
import Device from "@/api/Device";
import TopnavPage from '_c/topnav/TopnavPage'
import {apiResult} from "@/libs/util";
export default {
  components:{OrganizationTree,UserModelSelect,SearchHeader,TopnavPage},
  name: 'DeviceModelSelect',
  props: {
    readonly: {type: Boolean, default () {return false}},
    placeholder: {type: String,default() {this.$t('select_device')}},
    selectValue: {type: Number},
    srhValue: {type: String}, //显示deviceName在搜索框内
    cate: {type: Number, default () {return 1}}
  },
  watch:{
    'srhValue'(nValue,oValue){
      //console.log("srhValue: %o,%o",nValue,oValue);
      this.srhValue_=nValue;
    },
    'readonly'(nValue,oValue){
      //console.log("readonly: %o,%o",nValue,oValue);
      this.disabled_ = nValue;
    }
  },
  computed:{
    columns(){
      return [{title: this.$t('select'), key: 'action', width: 100,slot: 'select'},
        {title: this.$t('code'), key: 'code', sortable: true, width: 250},
        {title: this.$t('name'), key: 'name', sortable: true, width: 200},
        {title: this.$t('personnel'), key: 'userName', sortable: true, width: 200},
        {title: this.$t('organization'), key: 'orgName', sortable: true, width: 200}]
    }
  },
  model:{
    prop: 'selectValue',//返回值
    event: "dataChange" //触发此事件返回值
  },
  data() {
    return {
      disabled_:false,
      selectModel:false,
      modalLoading:false,
      srhValue_:null,
      tableData:[],
      queryParam:{
        page: {
          desc: ['create_time'],
          pages: 1,
          size: 10,
          total: 0,
          current: 1,
        },
        where:{
          keyword:null,
          code:null,
          name:null,
          cate:2,
          userId:null,
          orgId:null,
        },
        init:()=>{
          this.queryParam.where.keyword=null;
            this.queryParam.where.code=null;
            this.queryParam.where.name=null;
            this.queryParam.where.userId=null;
            this.queryParam.where.orgId=null;
            this.queryParam.where.cate=this.cate
        }
      },

      api: new Device(),
    }
  },
  methods:{
    clear(){
      this.$emit('dataChange', null);
      /** 在主件中用 @dataRow="function" 在funtion中可以接收数据 row*/
      this.$emit('result', null);
    },
    modelOk(){
      this.modalLoading = false;
    },
    modelCancel(){
      this.srhValue_ = null;
/*
      this.$emit('dataChange', null);
      /!** 在主件中用 @dataRow="function" 在funtion中可以接收数据 row*!/
      this.$emit('result', null);
*/
    },
    search(){
      /** 生成查询条件 */
      //this.queryParam.page.current = this.queryParam.page.pages * this.queryParam.page.size;
      this.queryParam.where.cate = this.cate;
      this.api.queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = null;
        apiResult(res.data,false,result=>{
          this.tableData = result.data.records;
          this.queryParam.page.total = result.data.total;
        });
      })
      this.modalLoading = false;
      this.selectModel=true;
    },
    changePage(){this.search()},
    rowclick(row,index){
      this.selectModel = false;
      this.srhValue_ = row.name;
      /** 会row 数据传给 selectValue，给父元素的v-model*/
      this.$emit('dataChange', row.id);
      /** 在主件中用 @dataRow="function" 在funtion中可以接收数据 row*/
      this.$emit('result', row);
    },
  },
  mounted() {}
}
</script>
<style lang="less">
@import "./topnav";
</style>
